<template>
  <div>
    <!-- 頭部 -->
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      title="任务详情"
    > </van-nav-bar>

    <!-- body -->
    <div
      class="code-body"
      v-if="user"
    >
      <div v-if="delData.taskAcceptList">
        <task-finish-item
          style="padding:0"
          :taskData="delData"
          :pjType='showType'
          showType='false'
        ></task-finish-item>
      </div>
      <div
        class="cyz"
        v-if="num>0 && showType !=1"
      >
        <div v-if="delData.taskAcceptList && delData.taskAcceptList.length > 0">
          <font
            v-for="acceptUser in delData.taskAcceptList"
            :key="acceptUser"
          >
            {{acceptUser.userName}},
          </font>
        </div>
        <span style="color: #999">{{num}}人已接单</span>
      </div>

      <div class="card-tabbar">
        <div
          class="jd-type"
          v-if="delData.isAllowAccept ===1 && showType != 2"
        >
          <van-button
            class="button"
            type="primary"
            size="small"
            @click="run(delData)"
          >我来接单</van-button>
        </div>
        <div
          class="finish-type"
          v-if="showType==1 && task && delData.isAllowAccept===0"
        >
          <van-button
            plain
            hairline
            type="primary"
            size="small"
            color="#333333"
            @click="delTask(delData)"
            v-if="task.ac_status < 2"
          >取消</van-button>
          <van-button
            plain
            hairline
            type="primary"
            size="small"
            color="#333333"
            v-if="task.ac_status < 2"
            @click="closeTask(delData)"
          >完成</van-button>
        </div>
      </div>
    </div>
        <div
          class="close"
          v-if="showType==2 && delData.status != 1"
        >
          <van-button
            plain
            hairline
            type="primary"
            size="small"
            color="#333333"
            @click="fbCloseTask(delData)"
          >关闭任务</van-button>
        </div>
    <!-- list logs -->
    <div
      class='log-body'
      v-if="delData.taskAcceptList && delData.taskAcceptList.length > 0"
    >
      <div
        v-for="acceptUser in delData.taskAcceptList"
        :key="acceptUser"
      >
        <logCard :taskData='acceptUser'></logCard>
        <div
          class="finish-type"
          style="padding: .4rem .2rem;"
          v-if="showType == 2 && acceptUser.ac_adopt_status	== 0 && acceptUser.ac_status == 3"
        >
          <van-button
          
            plain
            hairline
            type="primary"
            size="small"
            color="#288EF4"
            @click="caina(acceptUser)"
          >采纳</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@zi: 24px;
@h-zi: 32px;

.code-body {
  background: #fff;
  padding: 30px;
  .cyz {
    display: flex;
    text-align: left;
    background: #f1f1f1;
    color: #576b95;
    font-size: 26px;
    padding: 20px;
  }
}
.log-body {
  margin-top: 10px;
}
.card {
  background: #fff;
  display: flex;
  margin-bottom: 30px;
  .card-left {
    overflow: hidden;
    width: 15%;
  }
  .card-right {
    text-align: left;
    width: 85%;
    padding-right: 30px;
    .title {
      display: flex;
      h1 {
        margin-left: 15px;
        font-size: @h-zi;
      }
      span {
        color: #999999;
        font-size: @zi;
        padding-left: 6px;
        padding-top: 5px;
      }
      .teg-right {
        position: absolute;
        right: 40px;
      }
    }
    .context {
      padding: 30px;
    }
    .card-tabbar {
      padding-left: 10px;
      height: 30px;
      color: #999999;
      font-size: 24px;
      margin-top: 30px;
      span {
        line-height: 30px;
      }
      .button {
        margin-top: -8px;
        background: #288ef4;
        color: #ffffff;
        font-size: 28px;
        float: right;
        margin-right: 30px;
        padding: 10px 19px;
        border-radius: 8px;
        div {
          height: 40px;
        }
      }
    }
    .task-comment {
      margin-top: 40px;
      margin-right: 30px;
      background: #f7f7f7;
      .head {
        padding: 20px;
        font-size: 26px;
        color: #576b95;
        border-bottom: 1px solid #e8e8e8;
      }
      .body {
        padding: 20px;
        .comment-list {
          padding: 10px;
          .intro-content {
          }
        }
      }
    }
  }
}
.card-list {
  background: #fff;
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  h1 {
    font-size: 32px;
    line-height: 100px;
    margin-right: 20px;
  }
}
.code-px {
  margin-left: 30px;
  text-align: left;
  padding: 26px;
  font-size: 26px;
  color: #666666;
  span {
    float: right;
    margin-right: 30px;
    color: #288ef4;
    img {
      width: 24px;
      height: 24px;
      padding-left: 5px;
    }
  }
}
.jd-type {
  text-align: right;
  padding: 30px;
  padding-bottom: 0;
  padding-right: 0;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  button{
    font-size: 28px;
    font-weight: 500;
    border-radius: 8px;
  }
}
.finish-type {
  text-align: right;
  padding: 30px;
  border-top: 1px solid #e8e8e8;
  padding-bottom: 0;
  padding-right: 0;
  background: #fff;
  border-top: 1px solid #f9f9f9;
  button {
    margin-right: 10px;
    padding:10px 20px;
    font-size: 28px;
    font-weight: 500;
    border-radius: 8px;
  }
}
.close {
  background: #fff;
  text-align: end;
  padding-right: 30px;
  padding-bottom: 15px;
}
</style>
<script>
import {
  Button,
  Icon,
  NavBar,
  Tabs,
  Tab,
  Rate,
  Tabbar,
  TabbarItem,
  Image as VanImage,
  tag,
  field,
  Toast
} from "vant";
import { useRouter } from "vue-router";
import httpRequest from "../../util/httpRequest";
import maps from "../../util/maps";
import TaskFinishItem from "@/components/task/taskFinishItem.vue";
import logCard from "@/components/task/logCard.vue";

export default {
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [VanImage.name]: VanImage,
    [tag.name]: tag,
    [Rate.name]: Rate,
    [field.name]: field,
    [Toast.name]: Toast,
    TaskFinishItem,
    // eslint-disable-next-line vue/no-unused-components
    logCard
  },
  data() {
    return {
      router: useRouter(),
      delData: {},
      showType: 0, //0：其他列表過來 1：我接的任務過來 2：我發的任務過來
      user: {},
      commentStyle: "comment",
      formData: {},
      num: 0,
      myTaskId:null,
      taskAcceptStatus:null,
      labelsBoxData: {
        titel: "",
        status: 1,
        styleType: "C",
        lebType: "taskType",
        labels: maps.taskTypeLabMap
      }
    };
  },
  computed: {
    UrgentLevel() {
      return maps.urgentLevelMap[this.delData.urgentLevel];
    }
  },
  // 注意：组件挂载后才能访问到 ref 对象
  /**
   * showType
   */
  mounted() {
    this.formData.taskId = this.router.currentRoute.query.taskId;
    this.showType = this.router.currentRoute.query.type ? this.router.currentRoute.query.type : 0;
    this.myTaskId = this.router.currentRoute.query.myTaskId;
    this.taskAcceptStatus = this.router.currentRoute.query.taskAcceptStatus;
    httpRequest
      .post("任务详情", { taskId: this.router.currentRoute.query.taskId })
      .then(res => {
        this.delData = res.data;
        this.delData.content = this.delData.content ? this.delData.content.replace(/\n/g,"<br />") : "";
        if(this.delData.taskAcceptList && this.delData.taskAcceptList.length > 0){
          this.delData.taskAcceptList = this.delData.taskAcceptList.map(e2=>{
            e2.ac_finish_remak = e2.ac_finish_remak ? e2.ac_finish_remak.replace(/\n/g,"<br />") : "";
            e2.ac_remak = e2.ac_remak ? e2.ac_remak.replace(/\n/g,"<br />") : "";
            return e2;
          })
        }
        this.num = this.delData.taskAcceptList.length;
        this.task = this.num > 0 ?  this.delData.taskAcceptList[0] : null;
        this.user = this.delData.createUser;
        this.commentStyle = "comment";
      });
  },
  methods: {
    onClickLeft() {
      window.history.back(-1);
    },
    getChild(data) {
      this.formData.urgentLevel = data.id;
    },
    /**
     * 接单人取消接单任务
     */
    delTask() {
      let d = {
        taskAccpetId: this.myTaskId,
        taskAcceptStatus: this.taskAcceptStatus,
        type: "del"
      };
      this.router.push({
        path: "/enough",
        query: d
      });
    },
    /**
     * 完成任务
     */
    closeTask() {
      let d = {
        taskAccpetId: this.myTaskId,
        taskAcceptStatus: this.taskAcceptStatus,
        type: "close"
      };
      this.router.push({
        path: "/enough",
        query: d
      });
    },
    /**
     * 采纳任务
     */
    caina(item) {
      // console.log("采纳任务:", item);
      httpRequest
        .post("发布人采纳接单人完成成果", {
          taskAcceptId: item.id,
          taskId: this.formData.taskId
        })
        .then(res => {
          Toast(res.data);
          this.$router.back();
        });
    },
    /**
     * 发布人关闭任务
     */
    fbCloseTask(item) {
      httpRequest.post("发布人关闭任务", { taskId: item.id }).then(res => {
        Toast(res.data);
        this.router.back();
      });
    },
    run(data) {
      this.router.push({
        path: "/jd",
        query: {
          taskId: data.id
        }
      });
    }
  }
};
</script>
